<template>
	<view class="orders page bgf7 c00">
	
		
		<view class="flex flexC fs16 px10 pb6 c99 bgff">
			<view class="pt6 pb4 flex1 item aliC" 
				@click="switchTab(index)" 
				v-for="(item,index) in tabs" 
				:key="index" 
				:class="index==currentTab?'active':''">
				<text>{{item}}</text>
				<image v-if="currentTab == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix"></image>
			</view>
		</view>
		
		
		<view class="flex flexC aliC c66 fs15 mx14 mt10 tab">
			<view @click="clickTab(0)" class="flex1 py9" :class="tabIndex == 0 ? 'active' : ''">平台余额
			</view>
			<view @click="clickTab(1)" class="flex1 py9" :class="tabIndex == 1 ? 'active atv' : ''">店铺余额
			</view>
		</view>
		
		<!-- <view class="searchBox r40 flex flexC flex1 bgf2 px12 mx15 mt8">
			<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
			<input class="pl8 flex1 fs14 py8" confirm-type="search" type="text" placeholder="门店查询">
		</view> -->
		<scroll-view scroll-y class="list boxS bgf5" @scrolltolower="nextPage">
			<view v-for="(item,index) in list" :key="index" class="px14 r8 pb12 bgff my10 mx16" @click="detail(item)">
				<view class="flex flexC pt14 fs16 bold6">
					<text>{{item.create_time_text}}</text>
				</view>
				<view class="flex flexC flexB pt16 fs14">
					<text class="c33">{{item.type_txt}}</text>
					<text class="cff0">{{item.amount}}</text>
				</view>
			<!-- 	<view class="flex flexC flexB pt3 fs10 c99">
					<text>{{item.create_time_text}}</text>
					<view>
						<text>账户余额 </text>
						<text class="cff0 ml4">{{item.amount}}</text>
					</view>
				</view> -->
				<view class="flex flexC flexB pt3 fs10 c99">
					<text>{{item.mark}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '收入', '支出'],
				currentTab: 0,
				list: [],
				isnodata: false,
				isLastPage: false,
				page: 1,
				type: '',
				tabIndex:0
			};
		},
		onLoad() {
			this.page = 1;
			this.isnodata = false;
			this.isLastPage = false;
			this.list = [];
			if(this.tabIndex == 0){
				this.getAllList();
			}else{
				this.getList();
			}
		},
		methods: {
			
			clickTab(index){
				this.tabIndex = index;
				this.page = 1;
				this.isnodata = false;
				this.isLastPage = false;
				this.list = [];
				if(this.tabIndex == 0){
					this.getAllList();
				}else{
					this.getList();
				}
			},
			
			switchTab(index){
				this.currentTab = index;
				this.page = 1;
				this.isnodata = false;
				this.isLastPage = false;
				if(index == 0){
					this.type = "";
				}else if(index == 1){
					this.type = "in";
				}else{
					this.type = "out";
				}
				this.list = [];
				
				if(this.tabIndex == 0){
					this.getAllList();
				}else{
					this.getList();
				}
				
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getList();
			},

			
			getAllList() {
				let param = {
					page: this.page,
					type: this.type
				};
				let that = this;
				this.$api.allBalanceList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {
			
					}
				})
			},
			

			getList() {
				let param = {
					page: this.page,
					type: this.type
				};
				let that = this;
				this.$api.balanceList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.orders {
		
		.tab {
			background-color: #FEF9E2;
			overflow: hidden;
			border-radius: 20rpx 20rpx 0 0;
			.active {
				background-color: #fff;
				color: #333;
				position: relative;
				&::after {
					content: '';
					border-top: 78rpx solid #FEF9E2;
					border-left: 44rpx solid transparent;
					border-right: 0 solid transparent;
					position: absolute;
					top: 0;
					right: 0;
				}
				&.atv {
					&::after {
						display: none;
					}
					&:before {
						content: '';
						border-top: 78rpx solid #FEF9E2;
						border-right: 44rpx solid transparent;
						border-left: 0 solid transparent;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
		}
		.tabbox {
			.item {
				position: relative;
		
				.active {
					color: #333;
					font-weight: 600;
				}
		
				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: calc(50% - 19rpx);
				}
			}
		}
		
		.searchBox {
			background-color: #F0F0F0;
			.sear {
				width: 24rpx;
				height: 24rpx;
			}
		}
		
		.item {
			position: relative;
			&.active {
				color: #333;
				font-weight: 600;
			}
			.icon {
				width: 38rpx;
				height: 14rpx;
				position: absolute;
				bottom: -4rpx;
				left: calc(50% - 19rpx);
			}
		}

		.list {
			height: calc(100vh - 172rpx);
		}
	}
</style>
